<template>
	<view>
		<zmm-watermark :watermark="userStore.watermark" v-if="userStore.watermark"></zmm-watermark>
		<view class="content detail">
			<!--试品明细-->
			<view class="detail-item">
				<uni-section title="试品明细" type="line"></uni-section>
				<view class="detail-content formRef">
					<uni-forms ref="formRef" :model="formData" :rules="formRules" labelWidth="100px">
					  <uni-forms-item label="取货仓库" name="warehouseId" required>
						  <uni-data-select
								v-model="formData.warehouseId"
						  	placeholder="请选择取货仓库"
								@change="changeWarehouse"
						  	:localdata="warehouseList"></uni-data-select>
						</uni-forms-item>
						<uni-forms-item label="线索" name="clueId" required>
						  <ty-data-select
								dataKey="clueName"
								dataValue="clueId"
								v-model="formData.clueId"
						  	placeholder="请选择线索"
								filterable
						  	:localdata="salesmanClueList"></ty-data-select>
						</uni-forms-item>
						<uni-forms-item label="商品名称" name="productId" required>
						  <ty-data-select
						  	v-model="formData.productId"
						  	placeholder="请选择商品"
								dataKey="productName"
								dataValue="productId"
								filterable
								@change="changeProduct"
						  	:localdata="productList">
							</ty-data-select>
						</uni-forms-item>
						<uni-forms-item label="试品数量" name="testNumber">
						  <uni-easyinput type="number" v-model="formData.testNumber" placeholder="请输入试品数量" />
						</uni-forms-item>
						<uni-forms-item label="申请时间" name="applyTime">
							<uni-datetime-picker type="date" placeholder="请选择申请时间" v-model="formData.applyTime"/>
						</uni-forms-item>
						<uni-forms-item label="备注" name="remark">
						  <uni-easyinput type="textarea" v-model="formData.remark" placeholder="请输入备注" />
						</uni-forms-item>
					</uni-forms>
					<button type="primary" :disabled="isSubmit" :loading="isSubmit" @click="submit">提交</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { computed, onMounted, ref } from 'vue';
import { tab, auth, modal } from "@/plugins"
import { getTitle } from "@/utils/getter"
import { checkPermi, checkRole, checkOnlyPermi, checkOnlyRole } from "@/utils/permission"
import useUserStore from '@/store/modules/user'
import { warehouse } from "@/api/erp_api/warehouse"
import { salesmanClueFollowProductAdd, salesmanClueFollowProductDetail, salesmanClueFollowProductClueProduct } from "@/api/erp_api/sale"
import { salesmanClueFollowProductStatusList } from '@/utils/config.js'

	const userStore = useUserStore()
	const id = ref('')
	// const clueId = ref('')
	const clueFollowId = ref('')
	onLoad(async (option) => {
		// if (option.clueId) {
		// 	clueId.value = option.clueId
		// }
		await getWarehouse()
		if (option.clueFollowId) {
			clueFollowId.value = option.clueFollowId
		}
		if (option.id) {
			uni.setNavigationBarTitle({
				title: '修改试品'
			})
			id.value = option.id
			getDetail()
		} else if (userStore.user.warehouseId) {
			getProductList(userStore.user.warehouseId)
		}
	})
	
	// 获取仓库
	const warehouseList = ref([])
	const getWarehouse = (res) => {
		return warehouse().then(res => {
			warehouseList.value = res.rows.map(item => {
				return {
					...item,
					value: item.id,
					text: item.name
				}
			}) || []
			if (userStore.warehouseId) {
				formData.value.warehouseId = userStore.warehouseId
				changeWarehouse(userStore.warehouseId)
			}
		})
	}
	// 选择取货仓库
	const chooseWarehouseId = ref('')
	const changeWarehouse = (e) => {
		chooseWarehouseId.value = e
		formData.value.clueId = ''
		formData.value.productId = ''
		getProductList(e)
	}
	
	// 商品
	const productList = ref([])
	const salesmanClueList = ref([])
	const productName = ref('')
	const getProductList = (warehouseId) => {
		const params = {
			warehouseId
		}
		if (productName.value) {
			params.productName = productName.value
		}
		isLoading.value = true
		uni.showLoading({
			title: '数据加载中...'
		})
		salesmanClueFollowProductClueProduct(params).then(res => {
			productList.value = res.productInfos.map(item => {
				return {
					productId: item.id,
					productName: 	`${item.name}【${item.unit}】`,
					// batchNumber: '',
					purchasePrice: item.purchasePrice
				}
			}) || []
			salesmanClueList.value = res.salesmanClues.map(item => {
				return {
					clueId: item.id,
					clueName: `${item.storeName}【${item.customerName}】`
				}
			}) || []
			isLoading.value = false
			uni.hideLoading()
		}).catch(err => {
			isLoading.value = false
			uni.hideLoading()
		})
	}
	// 商品选择
	const changeProduct = (e) => {
		formData.value.productName = e.productName
		// formData.value.batchNumber = e.batchNumber
		// formData.value.purchasePrice = e.purchasePrice
		// formData.value.salesPrice = 0
	}
	
	// 获取详情
	const info = ref({})
	const isLoading = ref(false)
	const getDetail = () => {
		const params = {
			id: id.value
		}
		isLoading.value = true
		uni.showLoading({
			title: '数据加载中...'
		})
		salesmanClueFollowProductDetail(params).then(res => {
			info.value = res.data || {}
			getProductList(res.data.warehouseId)
			formData.value = {
				warehouseId: res.data.warehouseId,
				warehouseName: res.data.warehouseName,
				clueId: res.data.clueId,
				productId: res.data.productId,
				productName: res.data.productName,
				remark: res.data.remark,
				applyTime: res.data.applyTime,
				testNumber: res.data.testNumber
			}
			isLoading.value = false
			uni.hideLoading()
	  }).catch(() => {
			isLoading.value = false
			uni.hideLoading()
		})
	}
	
	// form表单数据
	const formData = ref({
		warehouseId: '',
		warehouseName: '',
		clueId: '',
		productId: '',
		productName: '',
		remark: '',
		testNumber: '',
		applyTime: ''
	})
	const formRef = ref(null)
	const formRules = ref({
		warehouseId: {
			rules: [{ required: true, errorMessage: '请选择取货仓库' }]
		},
		clueId: {
			rules: [{ required: true, errorMessage: '请选择线索' }]
		},
		productId: {
			rules: [{ required: true, errorMessage: '请选择商品' }]
		}
	})
	const isSubmit = ref(false)
	// 提交
	const submit = () => {
		formRef.value.validate().then(formRes => {
			const params = {  }
			if (id.value) {
				params.id = id.value
				switch (info.value.status) {
					case 0: 
						params.clueId = formRes.clueId
						params.warehouseId = formRes.warehouseId
						params.productId = formRes.productId
						params.productName = formData.value.productName
						params.warehouseName = warehouseList.value.filter(item => item.id === formRes.warehouseId)[0].name
						params.remark = formRes.remark
						params.applyTime = formRes.applyTime
						params.testNumber = formRes.testNumber
						break;
					default:
				}
			} else {
				params.clueId = formRes.clueId
				params.productId = formRes.productId
				params.warehouseId = formRes.warehouseId
				params.remark = formRes.remark
				params.testNumber = formRes.testNumber
				params.applyTime = formRes.applyTime
				// params.warehouseName = warehouseList.value.filter(item => item.id === formRes.warehouseId)[0].name
				// params.batchNumber = formRes.batchNumber
				// params.salesPrice = formRes.salesPrice
			}
			isSubmit.value = true
			salesmanClueFollowProductAdd(params).then(async (res) => {
				modal.showToast(res.msg)
				await uni.$u.sleep(1000)
				isSubmit.value = false
				clear()
				if (id.value) {
					uni.$emit('refreshList');  // 触发刷新事件
				}
				uni.navigateBack({
					delta: 1
				})
			}).catch(err => {
				isSubmit.value = false
			})
		})
	}
	// 清空
	const clear = () => {
		formData.value = {
			warehouseId: '',
			warehouseName: '',
			clueId: '',
			productId: '',
			productName: '',
			remark: '',
			testNumber: '',
			applyTime: ''
		}
	}
</script>

<style scoped lang="scss">
	.product-item {
		&-batch {
			color: #999;
			font-size: 12px;
		}
	}
	.uni-forms-item {
		width: 100%;
	}
</style>
